<template>
    <div class="content">
        <!-- 输入框部分 -->
        <!-- 单据编号 -->
        <span class="ipt1">
            <span>单据编号：</span>
            <a-input style="width: 150px; margin-left: 10px;" placeholder="请输入单据编号" />
        </span>
        <!-- 单据日期 -->
        <span class="ipt2">
            <span>单据日期：</span>
            <a-date-picker style="width: 110px; margin-left: 10px;" @change="onChange" placeholder="请选择开始" />
            ~
            <a-date-picker style="width: 110px" @change="onChange" placeholder="请选择结束" />
        </span>
        <!-- 业务员 -->
        <span v-show="expand" style="margin-right: 100px;">
            <span>业务员：</span>
            <a-input-search placeholder="请输入业务员" size="middle" @search="onSearch" style="width: 150px">
                <a-button slot="enterButton">
                    选择用户
                </a-button>
            </a-input-search>
        </span>
        <!-- 供应商输入框 -->
        <span class="ipt4" v-show="expand" style="display:inline-block; margin-top: 20px">
            <span>供应商：</span>
            <a-select style="width: 175px; display: inline-block;">
                <a-select-option value="Option1-1">
                    供应商1
                </a-select-option>
                <a-select-option value="Option1-2">
                    供应商2
                </a-select-option>
            </a-select>
        </span>

        <!-- 是否通过 -->
        <span class="ipt5" v-show="expand">
            <span>是否通过：</span>
            <a-select style="width: 80px; display: inline-block;">
                <a-select-option value="Option1-1">
                    是
                </a-select-option>
                <a-select-option value="Option1-2">
                    否
                </a-select-option>
            </a-select>
        </span>
        <!-- 是否作废 -->
        <span class="ipt6" v-show="expand">
            <span>是否作废：</span>
            <a-select style="width: 80px; display: inline-block;">
                <a-select-option value="Option1-1">
                    是
                </a-select-option>
                <a-select-option value="Option1-2">
                    否
                </a-select-option>
            </a-select>
        </span>

        <!-- 按钮部分 -->
        <span style="margin-top: 10px; margin-left: 20px">
            <a-button type="primary" icon="search">
                查询
            </a-button>
            <a-button icon="redo" style="margin-left: 10px">重置</a-button>
        </span>
        <!-- 点击下拉部分 -->
        <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
            展开 <a-icon :type="expand ? 'up' : 'down'" />
        </a>
        <!-- 功能模块 -->
        <ul>
            <!-- 新增 -->
            <li>
                <a-icon type="plus" />
                <span>新增</span>
            </li>
            <!-- 导出 -->
            <li>
                <a-icon type="download" />
                <span>导出</span>
            </li>
            <!-- 导入 -->
            <li>
                <a-icon type="export" />
                <span>
                    导入
                </span>
            </li>
            <li>
                <span style="color: rgba(0,0,0,.65)">已选择</span>
                {{ 0 }}
                <span style="color: rgba(0,0,0,.65)">项</span>
            </li>
            <!-- 清空 -->
            <li>
                <a-icon type="delete" />
                <span>清空</span>
            </li>
        </ul>

        <!-- 自定义列表 -->
        <ul class="selflist">
            <li>
                <a-icon type="setting" />
                <span>
                    自定义列表
                </span>
            </li>
        </ul>

        <!-- 表单部分 -->
        <a-table style="width: 1000px" bordered
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
            :data-source="data" :pagination="ipagination1" @change="handleTableChange2"
            :expanded-row-keys.sync="expandedRowKeys" :scroll="{ x: true }"
            >
            <a-table-column key="" title="#退货" data-index="" fixed="left" />
            <a-table-column key="" title="单据编号" data-index="" fixed="left" />
            <a-table-column key="" title="单据日期" data-index="" />
            <a-table-column key="" title="源单号" data-index="" />
            <a-table-column key="" title="制单人" data-index="" />
            <a-table-column key="" title="业务员" data-index="" />
            <a-table-column key="" title="客户" data-index="" />
            <a-table-column key="" title="处理状态" data-index="" />
            <a-table-column key="" title="是否通过" data-index="" />
            <a-table-column key="" title="是否关闭" data-index="" />
            <a-table-column key="" title="是否作废" data-index="" />
            <a-table-column key="" title="备注" data-index="" />
            <a-table-column key="" title="生效时间" data-index="" />
            <a-table-column key="" title="审核人" data-index="" />
            <a-table-column key="" title="流程" data-index="" />
            <a-table-column key="" title="创建时间" data-index="" />
            <a-table-column key="" title="创建部门" data-index="" />
            <a-table-column key="" title="修改时间" data-index="" />
            <a-table-column key="" title="修改人" data-index="" />

            <a-table-column key="" title="操作" style="width:150 " data-index="action" fixed="right">


                <template slot-scope="text, record">
                    <span>
                        <a>编辑 {{ record.firstName }}</a>
                        <a-divider type="vertical" />
                        <!-- <a key="id" @click="del(record.id)">删除</a> -->
                        <template>
                            <a-popconfirm key="id" title="确定要删除这个用户?" ok-text="确认" cancel-text="取消"
                                @confirm="del(record.id)" @cancel="cancel">
                                <a href="#">删除</a>
                            </a-popconfirm>
                        </template>
                    </span>
                </template>
            </a-table-column>
        </a-table>
    </div>
</template>

<script>
export default {
    name: 'XiaoShouChuKu',
    data() {
        return {
            // 展开功能
            expand: false,
            form: this.$form.createForm(this, { name: 'advanced_search' }),
            // 分页
            ipagination1: {
                current: 1,
                pageSize: 1,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + '共' + total + '条'
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            // 复选框
            selectedRowKeys: [], // Check here to configure the default column
        }

    },
    updated() {
        console.log('updated');
    },
    methods: {
        // 日期输入框
        onChange(date, dateString) {
            console.log(date, dateString);
        },
        // 点击下拉
        handleSearch(e) {
            e.preventDefault();
            this.form.validateFields((error, values) => {
                console.log('error', error);
                console.log('Received values of form: ', values);
            });
        },
        //分页
        handleTableChange2(pagination) {
            this.ipagination1.current = pagination.current
            this.ipagination1.pageSize = pagination.pageSize
        },
        // 复选框
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },

        handleReset() {
            this.form.resetFields();
        },

        toggle() {
            this.expand = !this.expand;
        },
    },
    computed: {
        count() {
            return this.expand ? 11 : 7;
        },
        hasSelected() {
            return this.selectedRowKeys.length > 0;
        },
    },
}
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    min-height: 400px;
    background: #fff;
    padding: 20px;
}

.content>div {
    float: left;
}

.ipt1 {
    margin-right: 10px;
}

.ipt2 {
    margin-left: 10px;
    margin-right: 20px;
}

.ipt4 {
    margin-top: 10px;
    width: 250px;
}

.ipt5 {
    margin-top: 10px;
    width: 170px;
}

.ipt6 {
    margin-top: 10px;

}

ul>li {
    float: left;
    margin: 10px;
    color: #1890ff;
    cursor: pointer;
}

.selflist>li {
    float: right;
    margin: 5px;
    color: #1890ff;
    cursor: pointer;
}
</style>